<!--
 作者：ex_wangshuai
 日期：2016-12-28
 功能：主页,不同的大行业入口，根据权限进入（window.interface.limits）。
 参数：不同的大行业区分参数datasource：JD表示白电大行业，WJ表示玩具大行业
 事件：enterApply点击进入大行业
-->
<template>
  <div class="index">
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
    <div class="index-title">
      <div class="left-button" @click="back" type="button">&nbsp;</div>
      开普勒&sdot;观星台
    </div>
    <banner></banner>
    <p class="content-title">·&nbsp;&nbsp;选择你感兴趣的行业&nbsp;&nbsp;·</p>
    <div class="content-all">
      <div class="white">
        <div class="title clearfix">
          <img class="title-img float-left" :src="imgUrl1">
          <div class="title-text float-left" @click="showContent(1)">
            <p>白电大行业</p>
            <p>开放品类:  抽油烟机...<img :class="['trigle', {'rotate': !showContent1}]" :src="trigleImg"></p>
          </div>
          <div :class="['enter', 'float-right', {'no-enter': !enterData1}]" @click="enterApply(1)">
            <a href="javascript:;">进入</a>
          </div>
        </div>
        <div class="content" v-show="showContent1" transition="expandi1">
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>小电器</span>
            </div>
            <div class="right clearfix">
              <span>挂烫机</span><span>吸尘器</span><span>饮水机</span><span>净水机</span><span>落地扇</span>
              <span>台式扇</span><span>工程扇</span><span>冷风扇</span><span>塔扇</span><span>电暖器</span>
              <span>油汀</span><span>小暖阳</span><span>电饭煲</span><span>电压力锅</span><span>电磁炉</span>
              <span>煎烤机</span><span>电炖锅</span><span>电水壶</span><span>豆浆机</span><span>料理机</span>
              <span>果汁机</span><span>烤箱</span><span>微波炉</span><span>面包机</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>大电器</span>
            </div>
            <div class="right clearfix">
              <span>冰箱</span><span>冷柜</span><span>空调</span><span>电热水器</span><span>燃热水器</span>
              <span>全自动洗衣机</span><span class="blue">滚筒洗衣机</span><span>双通洗衣机</span><span class="blue">烟灶套装</span><span class="blue">抽油烟机</span>
              <span>燃气灶</span><span>消毒柜</span>
            </div>
          </div>
        </div>
      </div>
      <div class="toy">
        <div class="title clearfix">
          <img class="title-img float-left" :src="imgUrl2">
          <div class="title-text float-left" @click="showContent(2)">
            <p>玩具大行业</p>
            <p>开放品类:  摇铃牙胶...<img :class="['trigle', {'rotate': !showContent2}]" :src="trigleImg"></p>
          </div>
          <div :class="['enter', 'float-right', {'no-enter': !enterData2}]" @click="enterApply(2)">
            <a href="javascript:;">进入</a>
          </div>
        </div>
        <div class="content" v-show="showContent2" transition="expandi2">
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>手动玩具</span>
            </div>
            <div class="right clearfix">
              <span>构建/拼插积木</span><span>数字屋/形状盒/多孔认知玩具</span><span>其他动手玩具</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>仿真类</span>
            </div>
            <div class="right clearfix">
              <span>过家家玩具</span><span>其他仿真/过家家类</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>爬行学步类</span>
            </div>
            <div class="right clearfix">
              <span>爬行垫</span><span>手推学步玩具</span><span class="blue">婴儿健身器</span><span>幼儿学爬玩具</span><span>其他爬行/学步/健身类</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>响铃安抚类</span>
            </div>
            <div class="right clearfix">
              <span>床铃/床挂</span><span class="blue">手偶/安抚玩偶</span><span class="blue">摇铃牙胶</span><span>宝宝布书</span><span>其他响铃/安抚类</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>学步车类</span>
            </div>
            <div class="right clearfix">
              <span>滑板车</span><span>扭扭车</span><span>三轮车</span><span>踏行车/滑行学步车</span><span>儿童电动车</span><span>儿童自行车</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>早教智能类</span>
            </div>
            <div class="right clearfix">
              <span>多动能玩具台/游戏桌</span><span>儿童MP3/故事机</span><span>早教机/点读机</span><span>其他早教/智能类</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>户外运动类</span>
            </div>
            <div class="right clearfix">
              <span>儿童帐篷</span><span>游戏屋</span><span>球类玩具/球类运动</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>绘画类</span>
            </div>
            <div class="right clearfix">
              <span>画板</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>音乐玩具类</span>
            </div>
            <div class="right clearfix">
              <span>电动手拍鼓</span><span>电子琴玩具/儿童电子琴</span><span>架子鼓</span><span>音乐电话</span><span>其他音乐类玩具</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>戏水玩具类</span>
            </div>
            <div class="right clearfix">
              <span>戏水/玩沙玩具</span>
            </div>
          </div>
        </div>
      </div>
      <div class="clothes">
        <div class="title clearfix">
          <img class="title-img float-left" :src="imgUrl3">
          <div class="title-text float-left" @click="showContent(3)">
            <p>服装大行业</p>
            <p>开放品类:  板鞋/休...<img :class="['trigle', {'rotate': !showContent3}]" :src="trigleImg"></p>
          </div>
          <div :class="['enter', 'float-right', {'no-enter': !enterData3}]" @click="enterApply(3)">
            <a href="javascript:;">进入</a>
          </div>
        </div>
        <div class="content" v-show="showContent3" transition="expandi3">
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>运动鞋</span>
            </div>
            <div class="right clearfix">
              <span class="blue">板鞋/休闲鞋</span><span>棒球鞋</span><span class="blue">帆布鞋</span><span class="blue">篮球鞋</span><span class="blue">跑步鞋</span>
              <span>乒乓球鞋</span><span>排球鞋</span><span>其他运动鞋</span><span>童鞋/青少年鞋</span><span>网球鞋</span>
              <span>羽毛球鞋</span><span class="blue">足球鞋</span>
            </div>
          </div>
        </div>
      </div>
      <div class="black">
        <div class="title clearfix">
          <img class="title-img float-left" :src="imgUrl4">
          <div class="title-text float-left" @click="showContent(4)">
            <p>黑电大行业</p>
            <p>开放品类:  暂无...<img :class="['trigle', {'rotate': !showContent4}]" :src="trigleImg"></p>
          </div>
          <div :class="['enter', 'float-right', {'no-enter': !enterData4}]">
            <a href="javascript:;">进入</a>
          </div>
        </div>
        <div class="content" v-show="showContent4" transition="expandi4">
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>手机</span>
            </div>
            <div class="right clearfix">
              <span>智能手机</span><span>非智能手机</span>
            </div>
          </div>
          <div class="content-item clearfix">
            <div class="left clearfix">
              <span>电视</span>
            </div>
            <div class="right clearfix">
              <span>智能电视</span><span>非智能电视</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Banner from './home/Banner.vue'
  import Confirm from 'vux/dist/components/Confirm'
  export default{
    components: {
      Banner,
      Confirm
    },
    data () {
      var data = {}
      data.show = false
      data.trigleImg = './static/img/trigle.png'
      data.imgUrl1 = './static/img/index1.png'
      data.imgUrl2 = './static/img/index2.png'
      data.imgUrl3 = './static/img/index3.png'
      data.imgUrl4 = './static/img/index4.png'
      data.showContent1 = false
      data.showContent2 = false
      data.showContent3 = false
      data.showContent4 = false
      data.enterData1 = false
      data.enterData2 = false
      data.enterData3 = false
      data.enterData4 = false
      data.datasourceList = []
      return data
    },
    methods: {
      // 点击进入大行业
      enterApply: function (value) {
        switch (value) {
          case 1:
            if (this.enterData1) {
              window.localStorage.setItem('datasource', this.datasourceList[0])
              window.getDatasource()
              this.$route.router.go('/home')
            }
            break
          case 2:
            if (this.enterData2) {
              window.localStorage.setItem('datasource', this.datasourceList[1])
              window.getDatasource()
              this.$route.router.go('/home')
            }
            break
          case 3:
            if (this.enterData3) {
              window.localStorage.setItem('datasource', this.datasourceList[2])
              window.getDatasource()
              this.$route.router.go('/home')
            }
            break
        }
      },
      // 返回
      back: function () {
        this.show = true
      },
      // 退出应用
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        } else {
        }
      },
      // 展开收缩
      showContent: function (value) {
        switch (value) {
          case 1:
            this.showContent1 = !this.showContent1
            break
          case 2:
            this.showContent2 = !this.showContent2
            break
          case 3:
            this.showContent3 = !this.showContent3
            break
          case 4:
            this.showContent4 = !this.showContent4
            break
        }
      }
    },
    ready: function () {
    },
    created: function () {
      this.datasourceList = JSON.parse(window.sessionStorage.datasourceList)
      for (var i = 0; i < this.datasourceList.length; i++) {
        switch (this.datasourceList[i]) {
          case 'jiadian':
            this.enterData1 = true
            break
          case 'wanju':
            this.enterData2 = true
            break
          case 'clothes':
            this.enterData3 = true
            break
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .index{
    padding-top: 6.6vh;
  }
  .index-title{
    text-align: center;
    height: 6.6vh;
    width: 100%;
    line-height: 6.6vh;
    font-size: .35rem;
    color: #000;
    position: fixed;
    top:0;
    left:0;
    z-index:101;
    background: #fff;
  }
  .left-button{
    width: .5rem;
    height: 100%;
    position: absolute;
    left: 0.38rem;
    top: 0;
    background: url('../../static/img/btn-back.png') no-repeat center right;
    background-size: 100%;
  }
  .content-title{
    height: 1.14rem;
    line-height: 1.14rem;
    font-size: 0.28rem;
    text-align: center;
    color: #999999;
  }
  .content-all{
    padding-bottom: 0.4rem;
  }
  .title{
    border-bottom: 1px solid #4A90E2;
  }
  .white{
    margin-top: 0.16rem;
  }
  .toy, .clothes, .black{
    margin-top: 0.65rem;
  }
  .title-text p:nth-child(1){
    font-size: 0.36rem;
    color: #4A90E2;
    height: 0.55rem;
    line-height: 0.55rem;
  }
  .title-text p:nth-child(2){
    font-size: 0.22rem;
    color: #999999;
    width: 2.47rem;
  }
  .title-img{
    height: 0.92rem;
    margin: 0 0.05rem 0 0.1rem;
  }
  .enter{
    width: 0.88rem;
    height: 0.48rem;
    line-height: 0.48rem;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #4A90E2;
    border-radius: 0.06rem;
    margin-top: 0.22rem;
    margin-right: 0.28rem;
    font-size: 0.28rem;
  }
  .enter a{
    display: block;
    width: 100%;
    height: 100%;
    color: #4A90E2;
  }
  .no-enter{
    border: 1px solid #666 !important;
  }
  .no-enter a{
    color: #666;
  }
  .trigle{
    height: 0.12rem;
    float: right;
    margin-top: 0.11rem;
  }
  .rotate{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
  .content-item{
    margin-top: 0.2rem;
  }
  .left{
    float: left;
    width: 26%;
  }
  .left span{
    float: left;
    width: 74%;
    font-size: 0.24rem;
    color: #333333;
    margin-left: 0.22rem;
    background: url('../../static/img/gt.png') no-repeat center right;
    background-size: 0.126rem 0.147rem;
  }
  .right{
    float: right;
    width: 74%;
    font-size: 0.24rem;
  }
  .right span{
    float: left;
    color: #666666;
    margin: 0.05rem 0;
    box-sizing: border-box;
    border-left: 1px solid rgb(220,220,220);
    padding: 0 0.17rem;
    line-height: 0.24rem !important;
  }
  .blue{
    color: #4A90E2 !important;
  }
  .expandi1-transition {
    transition: height .2s ease-in;
    height: 3.14rem;
    overflow: hidden;
  }
  .expandi1-enter, .expandi1-leave {
    height: 0;
  }
  .expandi2-transition {
    transition: height .3s ease-in;
    height: 7.45rem;
    overflow: hidden;
  }
  .expandi2-enter, .expandi2-leave {
    height: 0;
  }
  .expandi3-transition {
    transition: height .1s ease-in;
    height: 1.24rem;
    overflow: hidden;
  }
  .expandi3-enter, .expandi3-leave {
    height: 0;
  }
  .expandi4-transition {
    transition: height .1s ease-in;
    height: 1.1rem;
    overflow: hidden;
  }
  .expandi4-enter, .expandi4-leave {
    height: 0;
  }
</style>
